<template>
  <div class="row">
    <div v-for="column in columbList" :key="column._id" class="col-4 mb-4">
      <div class="card h-100 shadow-sm">
        <div class="card-body text-center">
          <img :src="column.avatar && column.avatar.fitUrl" :alt="column.title"
            class="rounded-circle border border-light my-3" style="width: 50px; height: 50px;">
          <h5 class="card-title">{{ column.title }}</h5>
          <p class="card-text text-left">{{ column.description }}</p>
          <router-link :to="{ name: 'column', params: { id: column._id || '' } }" class="btn btn-outline-primary">进入专栏
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import img from '../assets/column.jpg';
import { type ColumnProps } from '../store/store';
import { addColumnAvatar } from '../helper';
// 专栏详细类型
interface CoulumProps {
  column: ColumnProps[]
}
// 解构props的 column
let props = defineProps<CoulumProps>()
// 判断有没有图片=如果没有使用默认的
const columbList = computed(() => {
  return props.column.map(column => {
    addColumnAvatar(column, 50, 50)
    return column
  })
})
</script>


<style>
</style>
